<template>
	<view>
		<view class="nav-con">
			<view class="nav-bg" :style="[{ opacity: opacityVal}]"></view>
			<u-navbar bgColor="transparent" :fixed="false" :title="title" titleStyle="color:#fff" leftIconColor="#fff"
				autoBack></u-navbar>
		</view>
		<view class="">
			<u-swiper circular :list="list" height="750rpx" indicatorStyle="right: 20px"
				@change="e => currentNum = e.current">
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ list.length }}</text>
				</view>
			</u-swiper>
		</view>
		<view class="detail-price">
			<view style="font-weight: 600;font-size: 35rpx;color: #FF3902;">￥50.00</view>
			<view style="font-weight: 500;font-size: 35rpx;color: #000000;margin-top: 15rpx;">商品标题文字内容商品标题文字内容</view>
			<view style="font-size: 25rpx;color: #999999;margin-top: 15rpx;">已售1999</view>
			<view style="font-size: 27rpx;color: #000000;margin-top: 15rpx;">运费 <text
					style="color: #FF3902;margin-left: 10rpx;">￥50.00</text></view>

		</view>
		<view class="detai-desc">
			<view>商品详情</view>
		</view>
		<view class="detail-but goods-but">
			<view class="but-item">加入购物车</view>
			<view class="but-item but-buy" @click="goPay">立即购买</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '',
				currentNum: 0,
				opacityVal: 0,
				list: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				]

			}
		},
		onPageScroll(e) {
			let top = e.scrollTop;
			this.opacityVal = top > 200 ? 1 : top * 0.005;
			if (this.opacityVal === 1) {
				this.title = '商品详情'
			} else {
				this.title = ''
			}
			console.log(this.opacityVal);
		},
		methods: {
			goPay() {
				uni.navigateTo({
					url: '/pages/shop/pay/pay'
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.nav-con {
		width: 100vw;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99999;

	}

	.nav-bg {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: #0277de;
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}

	.detail-price {
		width: 750rpx;
		padding: 23rpx 31rpx;
		background: #FFFFFF;
	}

	.detai-desc {
		width: 750px;
		padding: 23rpx 31rpx;
		background: #FFFFFF;
		margin-top: 23rpx;
		font-weight: 500;
		font-size: 31rpx;
		color: #000000;
		min-height: 300rpx;
	}

	.goods-but {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.but-item {
		width: 344rpx;
		height: 77rpx;
		background: #E1F1FF;
		border-radius: 38rpx 0px 0px 38rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 27rpx;
		color: #0277DE;
	}

	.but-buy {
		color: #FFFFFF;
		background: #0277DE;
		border-radius: 0px 38rpx 38rpx 0px;
	}
</style>